<template>
      <div class="content-box">
        <div class="serchBox clearfix">
            <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search" @reset="reset">
                <!-- <template #buttons="{ model , formRef }">
                        <el-button type="primary" @click="search(model,formRef)">搜索</el-button>
                        <el-button  @click="reset(model,formRef)">重置</el-button>
                </template> -->
            </easyForm>
        </div>
        <div class="containerBox">
            <el-table :data="tableData" border :header-cell-style="{background:'#eef1f6',color:'#606266'}" >
                <el-table-column
                    align="center"
                    :prop="item.name"
                    :label="item.label"
                    v-for="(item, index) in tableHeader"
                    :key="index"
                    :fixed="item.fixed"
                    :width="item.width"
                    :type="item.type"
                    :min-width="item.minWidth"
                >
                </el-table-column>
                <el-table-column label="操作" width="360" fixed="right" align="center">
                    <template #default="scope">
                        <el-button size="small" link type="primary" @click="confirmOrder(scope.$index, scope.row)">确认订单</el-button>
                        <el-button size="small" link type="primary" @click="orderDetail(scope.$index, scope.row)">订单详情</el-button>
                        <el-button size="small" link type="primary" @click="toAppointment(scope.$index, scope.row)">预约记录</el-button>
                        <el-button size="small" link type="danger" @click="changeCons(scope.$index, scope.row)">更换咨询师</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_box">
                <v-pagination :pagesize="query.limit"
                    :total="pageTotal"
                    :options="query"
                    :render="getData">
	            </v-pagination>
            </div>
        </div>
      </div>
</template>

<script lang="ts" setup>
import { ref , reactive} from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import easyForm from '@/components/formItem/index.vue'
import vPagination from '@/components/pagenation/index.vue'
import {useStore} from "vuex";


const formList = {
    base: [
        { label: '下单时间', field: 'date', type:'date', },
        { label: '', field: 'type', type:"select",placeholder: '订单状态',
            options: { data: [
            { label: '待支付', value: 1 }, 
            { label: '待咨询师确认', value: 2 },
            { label: '咨询师已确认', value: 3 },
            { label: '已完成', value: 4 },
            { label: '已取消', value: 5 },
            { label: '待填写信息', value: 6 },
            { label: '代预约', value: 7 },
            { label: '待用户确认', value: 8 }] } },
        { label: '', field: 'style', type:"select",placeholder: '支付状态',
            options: { data: [
            { label: '未付款', value: 1 },
            { label: '已付款', value: 2 },
            { label: '申请退款', value: 3 },
            { label: '已退款', value: 4 },
            { label: '部分退款', value: 5 }, ] } },
        { label: '', field: 'from', type:"select",placeholder: '订单类型',
            options: { data: [
            { label: '普通订单', value: 1 }, 
            { label: '免费订单', value: 2 },
            { label: '企业订单', value: 3 },
            { label: '自建订单', value: 4 }, ] } },
        { label: '', field: 'Id', placeholder: '订单编号' },
        { label: '', field: 'Id', placeholder: '渠道标识' },
        { label: '', field: 'countState', type:"select",placeholder: '咨询师类型',
            options: { data: [
            { label: '无', value: 1 },
            { label: '咨询师', value: 2 },
            { label: '服务师', value: 2 },
            { label: '实习咨询师', value: 2 },
            { label: '新手咨询师', value: 2 },
            { label: '成熟咨询师', value: 2 },
            { label: '资深咨询师', value: 2 },
            { label: '督导师', value: 2 },
            { label: '资深督导师', value: 2 }, ] } },
        { label: '', field: 'Id', placeholder: '咨询师姓名' },
        { label: '', field: 'Id', placeholder: '用户ID' },
        { label: '', field: 'Id', placeholder: '来访者姓名/手机' },


        { label: '', field: 'danger', type:"select",placeholder: '机构首单类型',
            options: { data: [
            { label: '首单', value: 1 },
            { label: '非首单', value: 2 }] } },
        { label: '', field: 'countState', type:"select",placeholder: '咨询师首单类型',
            options: { data: [
            { label: '首单', value: 1 },
            { label: '非首单', value: 2 }, ] } },
        { label: '', field: 'countState', type:"select",placeholder: '成人/儿童订单',
            options: { data: [
            { label: '承认', value: 1 },
            { label: '儿童', value: 2 }, ] } },
        { label: '', field: 'countState', type:"select",placeholder: '优惠类型',
            options: { data: [
            { label: '未使用优惠', value: 1 },
            { label: '优惠券', value: 2 },
            { label: '老访客优惠', value: 3 },
            { label: '兑换码', value: 4 },
            { label: '学生优惠', value: 5 },
            { label: '押金抵扣', value: 6 },
            { label: '定金抵扣', value: 7 }, ] } },

    ],
}
const fieldList: Form.FieldItem[] = formList.base;

const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '搜索',
    resetButtonText: '重置',
    downloadButtonText: '导出',
    showResetButton: true,
    showDownloadButton: true,
    showSubmitButton:true,
};
// 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        inlineFlag: true,
        size:'small',
        count: '',
        content: '',
        date:''
    })
// 表格内容
let tableLayout = ref('fixed')
let tableHeader = [
    {
        label:"用户姓名",
        width: 120,
        name:"name",
        fixed:'left'
    },
    {
        label:"用户标签",
        width: 100,
        name:"name",
        fixed:'left'
    },
    {
        label:"联系手机",
        width: 200,
        name:"time",
        fixed:'left'
    },
    {
        label:"咨询师姓名",
        name:"content",
        width: 120
    },
    {
        label:"咨询服务ID",
        name:"content",
        width: 120
    },
    {
        label:"机构首单",
        name:"content",
        width: 120
    },
    {
        label:"咨询师首单",
        name:"content",
        width: 120
    },
    {
        label:"分成类型",
        name:"content",
        width: 120
    },
    {
        label:"订单编号",
        name:"content",
        width: 120
    },
    {
        label:"总预约次数",
        name:"content",
        minWidth: 130
    },
    {
        label:"已完成预约数量",
        name:"content",
        minWidth: 130
    },
    {
        label:"订单状态",
        name:"content",
        minWidth: 130
    },
    {
        label:"订单类型",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"下单时间",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"支付状态",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"支付金额（元）",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"优惠金额（元）",
        name:"content",
        minWidth: 130
    },
    {
        label:"优惠类型",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"渠道标识",
        name:"content",
        minWidth: 130
    },
    {
        label:"申请取消订单原因",
        name:"content",
        minWidth: 150
    },
]
 ;
let tableData = [{
        name: '张三',
        time: '2022-12-01 14:56:28',
        content: '登录系统',
        id:1,
        state:0,
        times:0

      }, {
        name: '李四',
        content: '嗷嗷嗷',
        time: '2022-12-12 09:22:32',
        id:2,
        state:1,
        times:0
      }, {
        name: '王五',
        content: '嗡嗡嗡',
        time: '2022-11-20 11:23:45',
        id:3,
        state:1,
        times:1
      }, {
        name: '赵六',
        content: '登录系统',
        time: '2022-12-01 14:56:28',
        id:4
      }]
// 分页数据
const  pageTotal = ref(6),//总条数
    query = reactive({//配置对应的查询参数
        appTimeStart:'',
        appTimeEnd:'',
        page: 1,
        limit:10,//page第几页,limit是一页几个
    });
// 搜索按钮
let search = (searchCon: any,formRef: any) => {
    console.log(searchCon)
    console.log(formRef)
}
// 重置按钮
const reset = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// 新增
const addUser = () => {

}
// 咨询记录
const toAppointment = (index: number, row: any) => {
  let tagsItem = {
        "component": () => import("@/views/consultingMana/appointment.vue"),
            "path": "/appointment",
            "name":"appointment",
            "meta":{
                "icon": "Monitor",
                "name": "预约记录",
            },
    }
    router.push({name: 'appointment',query: { toId:row.id }});
    store.dispatch("ADD_TAG", tagsItem)
}
// 更换咨询师
const changeCons = (index: number, row: any) => {
    if(row.state == 0) {
        ElMessageBox.confirm(
            '已取消订单不可更换咨询师',
            '提示',
            {
            confirmButtonText: '确定',
            showCancelButton:false,
            type: 'warning',
            }
        )
        .then(() => {
            
        })
    }else if(row.times == 0) {
        ElMessageBox.confirm(
            '没有可更换的次数',
            '提示',
            {
            confirmButtonText: '确定',
            showCancelButton:false,
            type: 'warning',
            }
        )
        .then(() => {
            
        })
    }else{
        let tagsItem = {
        "component": () => import("@/views/orderMana/changeCons.vue"),
            "path": "/changeCons",
            "name":"changeCons",
            "meta":{
                "icon": "Monitor",
                "name": "更换咨询师",
            },
        }
        router.push({name: 'changeCons',query: { toId:row.id }});
        store.dispatch("ADD_TAG", tagsItem)
    }
}
// 获取详情
const getData = () => {


}
// 订单确认
const confirmOrder = (index: number, row: any) => {
    ElMessageBox.confirm(
    '确认咨询后，该来访者再次预约时将默认接受预约。是否确认咨询?',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      
    })
}
const router = useRouter();
const store = useStore();
// 订单详情
const orderDetail = (index: number, row: any) => {
    let tagsItem = {
        "component": () => import("@/views/orderMana/orderDetails.vue"),
            "path": "/orderDetails",
            "name":"orderDetails",
            "meta":{
                "icon": "Monitor",
                "name": "修改预约信息-" + row.id,
                "id" : row.id
            },
    }
    router.push({name: 'orderDetails',query: { id:row.id }});
    store.dispatch("ADD_TAG", tagsItem)
}
</script>
<style scoped lang="scss">
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    // padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;

}
</style>